<template>
	<view class="container">
		<view class="content">
			<view class="msg-wrapper">
				<view class="title">商家留言</view>
				<textarea class="textarea" placeholder="您有什么想对商家说的吗" v-model="message"></textarea>
			</view>
			<view class="msg-wrapper">
				<view class="title">手机号</view>
				<input class="input" type="number" v-model="phone"></input>
			</view>
			<view class="msg-wrapper">
				<view class="title">房间号</view>
				<input class="input" type="number" v-model="roomNum" :placeholder="'非必填，若无房间号则无需填写'"></input>
			</view>
			<view class="img-wrapper">
				<view class="title">图片上传</view>
				<view class="img-list">
					<view class="img-item" v-for="(image, index) in images" :key="index">
						<view class="delet" @click="handleCancel(index)">-</view>
						<image :src="image" mode="aspectFill" class="img"></image>
					</view>
					<view class="img-item btn" @click="handleUploadSingle">
						<image src="/static/upload.png" class="img"></image>
					</view>
				</view>
			</view>
			<button type="default" :disabled="flag" class="bottom-btn" @click="handleLeaMsg">提交</button>
		</view>
	</view>
</template>

<script>
	import { publish } from '@/api/store.js'
	import upload from '@/mixins/upload.js'
	export default {
		mixins: [upload],
		data() {
			return {
				flag: false,
				message: '',
				phone: '',
				roomNum:'',
				details: {},
				type: 1
			}
		},
		onLoad(option) {
			if (option.details) {
				this.details = JSON.parse(decodeURIComponent(option.details))
			}
			if (option.type) {
				uni.setNavigationBarTitle({title:"跨级投诉"})
				this.type = option.type
			}
		},
		methods: {
			handleLeaMsg() {
				if (!this.message) {
					uni.showToast({
						title: '请输入留言！',
						icon: 'none',
						duration: 2000
					})
					return
				}
				const imagesStr = this.images.join(',')
				const data = {
					message: this.message,
					mobile: this.phone,
					images: imagesStr,
					shopId: this.details.id,
					roomNum:this.roomNum,
					type: this.type
				}
				this.flag = true
				publish(data).then(respanse => {
					this.flag = false
					uni.showToast({
						title: '留言已提交成功！',
						icon: 'success',
						duration: 2000
					})
					this.message = ''
					this.images = []
				}).catch(err => {
					this.flag = false
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		padding: 32rpx 0 59rpx;
		margin: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
		overflow: hidden;
		.title{
			padding-left: 35rpx;
			line-height: 42rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #000000;
		}
		.textarea{
			display: block;
			padding: 16rpx 0 0 21rpx;
			margin: 33rpx auto 0;
			width: 640rpx;
			height: 445rpx;
			box-sizing: border-box;
			line-height: 36rpx;
			font-size: 26rpx;
			color: #333;
			background: #F5F5F5;
			border: 1px solid #E5E5E5;
			border-radius: 10rpx;
		}
		.input{
			display: block;
			padding: 16rpx 0 0 21rpx;
			margin: 33rpx auto 0;
			width: 640rpx;
			height: 90rpx;
			box-sizing: border-box;
			line-height: 74rpx;
			font-size: 26rpx;
			color: #333;
			background: #F5F5F5;
			border: 1px solid #E5E5E5;
			border-radius: 10rpx;
		}
		.msg-wrapper {
			margin-bottom: 35rpx;
		}
		.img-wrapper{
			// margin-top: 35rpx;
			.img-list{
				display: flex;
				flex-wrap: wrap;
				padding-right: 20rpx;
				.img-item{
					position: relative;
					margin: 30rpx 0 0 35rpx;
					width: 144rpx;
					height: 144rpx;
					.img{
						width: 100%;
						height: 100%;
					}
					.delet{
						position: absolute;
						right: -20rpx;
						top: -20rpx;
						width: 50rpx;
						height: 50rpx;
						line-height: 50rpx;
						text-align: center;
						font-size: 30rpx;
						color: #fff;
						background: linear-gradient(90deg, #EB7C3F, #EA5D2E);
						border-radius: 50%;
					}
				}
			}
		}
	}
	.bottom-btn{
		display: block;
		margin: 52rpx auto 0;
		width: 644rpx;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 32rpx;
		color: #fff;
		background: linear-gradient(90deg, #EB7C3F, #EA5D2E);
		border-radius: 45px;
	}
</style>
